/**
 * Description
 *
 * Creation Date 14/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	StyleSheet,
	View,
	Image,
	TouchableOpacity,
	Platform,
	Text
} from 'react-native';
import { NavigationActions } from 'react-navigation';
import { is, fromJS} from 'immutable';
import { screen, color, config } from '../../utils';
import Icon from 'react-native-vector-icons/Ionicons';
import ButtonItem from '../../components/ButtonItem';
import { connect } from 'react-redux';

import { AddToCart } from '../../redux/actions/rootActions';
// import AsyncStorageDemo from '../../components/AsyncStorageDemo'


class ProductScreen extends Component {
	static navigationOptions = ({navigation}) => ({
		header: <View style={{width: screen.width, height: 30, backgroundColor: color.backgroundColor}} />,
	});

	static contextTypes = {
		store: PropTypes.any
	}

	constructor(props, context) {
		super(props, context);
		this.state = {
		}
	}

	goBack = () => {
		const backAction = NavigationActions.back({
			key: this.props.navigation.state.key,
		});
		console.log(backAction)
		this.props.navigation.goBack();
	}

	componentDidMount() {
		console.log('product store', this.context.store.getState().cartReducers)
	}

	async goToCart(productData) {
		await this.props.AddToCart(productData);
		this.props.navigation.navigate('Cart')
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render () {
		const { params } = this.props.navigation.state;
		const productData = params.product;
		return (
			<View style={styles.container}>
				<View style={styles.gridContainer}>
					<TouchableOpacity onPress={this.goBack} style={{paddingLeft:10, paddingRight: 15, marginTop: 3}}>
						<Icon name="ios-arrow-back" size={25} color={color.black} />
					</TouchableOpacity>
					<Text style={{paddingRight: 10}}>{productData.product_name}</Text>
				</View>
				<View style={styles.textStyle}>
					<Text style={{fontSize: 20, fontWeight:'bold'}}> {productData.product_name}</Text>
					<Image style={styles.brandImage} resizeMode='stretch'
						   source={{uri: config.productBaseUrl + productData.product_image + '?param=350y150'}} />
					<Text style={styles.price}> ￥{productData.price}</Text>
				</View>
				<ButtonItem buttonText="BUY NOW" onPress={() => this.goToCart(productData)} />
			</View>
		)
	}
}


//连接reducer
export default connect((state) => {
	const { cartReducers } = state;  // 这里的beautyReducers注意和对应的reducer文件export的类相同
	return {
		cartReducers
	}
}, { AddToCart })(ProductScreen) // 这里是对应的存值的方法,导出当前模块


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: color.backgroundColor
	},
	gridContainer: {
		height: 35,
		paddingTop: 5,
		paddingBottom: 5,
		flexDirection: 'row',
		flexWrap: 'wrap',
		alignItems: 'center'
	},
	textStyle:{
		width:screen.width,
		marginTop: 15,
		alignItems:'center',
		justifyContent: 'center'
	},
	brandImage: {
		width: 350,
		height: 150,
		marginTop: 25,
		marginBottom: 25
	},
	price: {
		fontSize: 40,
		fontWeight: 'bold',
		color: color.theme
	}
});